<template>
  <div class="roleManage">
    <el-row class="container">
          <el-row>
            <el-col :span="2" v-if="getButtonConfig&&getButtonConfig.add">
              <addRole @update="updateList"></addRole>
            </el-col>
            <el-col :span="2" v-else>&nbsp;</el-col>
            <div class="roleNav">
              <el-col :span="6" :offset="14"><el-input class="search" v-model="name" placeholder="请输入查询的名字"></el-input></el-col>
              <el-col :span="2" class="searchButton" icon="search"><el-button @click="search">查询</el-button></el-col>
            </div>
          </el-row>
          <el-row>
            <el-table :data="tableData" :default-sort = "{prop: 'date', order: 'descending'}" class="roleTable">
              <el-table-column label="序号" type="index" width="70"></el-table-column>
              <el-table-column prop="name" label="名称" sortable min-width="70"></el-table-column>
              <el-table-column prop="description" label="描述" sortable min-width="130"></el-table-column>
              <el-table-column prop="creator" label="创建人" sortable min-width="70"></el-table-column>
              <el-table-column prop="dateCreated" label="创建时间" sortable min-width="110"></el-table-column>
              <el-table-column label="操作" min-width="130" >
                <template scope="scope" class="controller">
                  <checkRole :id="scope.row.id" :name='scope.row.name' @update="updateList" style="display: inline-block"></checkRole>
                  <disPower :id="scope.row.id" :name='scope.row.name' :powerList="rolePower" style="display: inline-block" v-if="getButtonConfig&&getButtonConfig.distrbute"></disPower>
                  <el-button type="text" size="small" @click="deleteRole(scope.row)" v-if="getButtonConfig&&getButtonConfig.delete" class="delete">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="curPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalSize">
            </el-pagination>
        </div>
    </el-row>
  </div>
</template>
<script>
  import checkRole from './CheckRole'
  import addRole from './AddRole'
  import disPower from './DistributePower.vue'
  import {postLog} from 'api/common'
  export default{
    components:{checkRole,addRole,disPower},
    data(){
      return{
        tableData:[],
        currentPage4:3,
        show:false,
        rolePower:[],
        name:'',
        pageSize:20,
        curPage:1,
        totalSize:0
      }
    },
    created(){
      this.$emit('setTitleMsg', ['系统管理','角色管理'])
//       更新角色列表
      this.updateList();
//      获取权限分配树
      this.$http.get('/api-web/v1/api/auth/menu')
        .then((response)=>{
          let data=response.body;
          this.rolePower=data.result;
        },(err)=>{
          this.$alert('请求出错','提示');
        })
    },
    computed:{
      getButtonConfig(){
            // console.log(this.$store.getters.getButtonConfig('roleManage'));
            return this.$store.getters.getButtonConfig('roleManage')
      }
    },
    methods: {
      search(){
        this.updateList();
      },
      updateList(){
        let curPage=this.curPage-1 > -1?this.curPage-1:0;
        this.$http.get('/api-web/v1/api/userRole/list?name='+this.name+'&pageSize='+this.pageSize+'&curPage='+curPage).then((response)=>{
          let data=response.body;
          this.tableData=data && data.result ? data.result : [];
          this.totalSize=data.size;
        })
      },
      formatter(row, column) {
        return row.address;
      },
      look(scope){
        this.show=true;
      },
      handleSizeChange(val) {
        // console.log('handleSizeChange', val)
        this.pageSize=val;
        this.updateList();
      },
      handleCurrentChange(val) {
        // console.log('handleCurrentChange', val)
        this.curPage=val;
        this.updateList();
      },
      deleteRole(obj){
        this.$http.post('/api-web/v1/api/userRole/'+obj.id+'/delete')
        .then((response)=>{
          let data=response.body;
          if(data.resultCode=='200'){
            postLog('SYSTEM_ROLE_DELETE', obj.id, obj.name)
            this.$alert(data.result,'提示');
            this.updateList();
          }else if(data.resultCode=='1002'){
            this.$alert(data.result,'提示');
          }
        },(err)=>{
          this.$alert('请求出错','提示');
        })
      }
    }
  }
</script>
<style lang="less">
@greenStyle:#63c5ce;
@orangeStyle:#f7931e;
  .roleManage{
    .container{
      height:100%;
    }
    .content{
      min-height:100%;
      background: #ffffff;
      padding:1.25rem;
    }
    .searchButton{
      text-align: left;
    }
    .roleTable{
      margin-top:2rem;
    }
     //新增按钮roleNav
    .createButton{
      float: left;
      background: @orangeStyle;
      border-color: @orangeStyle;
      color:#ffffff;
    }
    //顶部搜索框
    .roleNav{
      .el-input__inner{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border:1px solid @orangeStyle;
        border-right:0;
      }
      .searchButton{
        .el-button{
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          background: @orangeStyle;
          color:#ffffff;
          border:1px solid @orangeStyle;
        }
      }
    }
    //table
    .roleTable .el-table__body-wrapper{
      overflow-y: hidden;
    }
    .el-table{
      th {
        background: #ebfcfc;
        .cell {
          background: #ebfcfc;
          font-size: 0.875rem;
          color: #222222;
          text-align: left;
        }
      }
      tbody{
        font-size:0.875rem;
        td{
          height:3.125rem;
        }
        .cell{
          text-align: left;
          span{
            font-size:0.875rem;
            color:@greenStyle;
            margin-right:0.625rem;
            &:active{
              color:#4d9999;
            }
          }
          .el-dialog__header{
            span{
              color:#222222;
              font-weight: normal;
              font-size:1rem;
            }
          }
          .el-input.is-disabled .el-input__inner,.el-textarea.is-disabled .el-textarea__inner{
            background: #ffffff;
          }
          .el-radio__label{
              font-size:1rem;
              color:#222222;
          }
          .el-button+.el-button{
            margin-left:0;
          }
          .delete span{
            color:#e84357;
            &:active{
              color:#cc3a56;
            }
          }
        }
      }
    }
    //弹出框
    .el-dialog--small{
      width:576px;
      border-radius: 10px;
      .dialog-footer{
        text-align: center;
        .el-button + .el-button{
          margin-left:50px !important;
        }
        .cancelBtn{
          width: 140px;
          span{
            color:#222222;
          }
          &:hover{
            border:1px solid @greenStyle;
            span{
              color:@greenStyle;
            }
          }
        }
        .commonBtn{
          width: 140px;
          background: @greenStyle;
          border:1px solid @greenStyle;
          span{
            color:#ffffff;
          }
        }
      }
      .el-form-item__error{
        margin-left:50px;
      }
    }
    .el-dialog__header{
      padding:20px 20px 15px 20px;
      background-color: #F6F6F6;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      text-align: left;
      line-height:100%;
    }
    .dialog-form{
      margin-left:50px;
    }
    .el-form-item.is-required .el-form-item__label:before {
      content: '';
      color: #ff4949;
      margin-right: 4px;
    }
    //权限分配弹出框
    .cell{
      .distributeDia{
        .submit{
          width:100px;
          margin-top:14px;
          margin-left:220px;
          text-align: center;
          background: @greenStyle;
          span{
            color:#ffffff;
          }
        }
      }
    }
    //单选框
    .el-radio-group{
      width:400px;
      text-align: left;
    }
    //权限树
    .el-tree--highlight-current{
      height:300px;
      overflow: auto;
    }
    //分页菜单
    .block{
      float: right;
      margin-top:1.2rem;
    }
    .el-pager{
      .active{
        background: @greenStyle;
      }
    }
  }
 

</style>
